﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<h1>Name of Location</h1>

<script>
    $(function () {
        $("#accordion").accordion();
    });
	</script>
  
<!--script type="text/javascript">
    $(document).ready(function () {
        $(".flip").click(function () {
            $(".panel").slideDown("slow");
        });
    });
</script-->
 
 <script language='javascript'>
     function changeContent(tablecell) {
         //alert(tablecell.firstChild.nodeValue);
         var newInfo="<INPUT type=text name=newname onBlur=\"javascript:submitNewName(this);\" value=\"" + tablecell.innerHTML + "\">";
         tablecell.innerHTML = newInfo;
         tablecell.firstChild.focus();
     }
     function submitNewName(textfield) {
         //alert(textfield.value);
         textfield.parentNode.innerHTML = textfield.value;
     }
</script>
<script language="JavaScript">

<!-- Begin
  function addRow(id){
    var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
    td1.setAttribute('onclick', 'javascript:changeContent(this)'); 
    td1.appendChild(document.createTextNode("Enter New Menu Item"))
    var td2 = document.createElement("TD")
    td2.appendChild(document.createTextNode("column 2"))
    td2.setAttribute('onclick', 'javascript:changeContent(this)');
    row.appendChild(td1);
    row.appendChild(td2);
    tbody.appendChild(row);
  }
//  End -->
</script>


<div class="demo">

<div id="accordion">

	<h1><a href="#">Breakfast: <font size=1>6AM-11AM</font></a></h1>
    <div>
<table id="myTable"  border=1 bgcolor=gray ondblclick="javascript:addRow('myTable')">
<tr>
<th onclick="javascript:changeContent(this);">Enter New Menu Item</th>
<th onclick="javascript:changeContent(this);">row1 cell2</th>


</tr>
</table>


</div>
 
<!--style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:auto;
width:auto;
display:none;
}
</style-->

	<h3><a href="#">Lunch</a></h3>
	<div>
		<table id="Table1" border=1 bgcolor=gray ondblclick="javascript:addRow('Table1')">
<tr>
<th onclick="javascript:changeContent(this);">Enter New Menu Item</th>
<th onclick="javascript:changeContent(this);">row1 cell2</th>


</tr>
</table>
	</div>
	<h3><a href="#">Dinner</a></h3>
	<div>
				<table id="Table2" border=1 bgcolor=gray ondblclick="javascript:addRow('Table2')">
<tr>
<th onclick="javascript:changeContent(this);">Enter New Menu Item</th>
<th onclick="javascript:changeContent(this);">row1 cell2</th>


</tr>
</table>
	</div>
	<h3><a href="#">3rd Shift</a></h3>
	<div>
				<table id="Table3" border=1 bgcolor=gray ondblclick="javascript:addRow('Table3')">
<tr>
<th onclick="javascript:changeContent(this);">Enter New Menu Item</th>
<th onclick="javascript:changeContent(this);">row1 cell2</th>


</tr>
</table>
	</div>
</div>

</div>
